<template>
  <div class="home_page">
    <div class="body_msg">
      <div class="con">
        <div class="head">
          <p class="conTitle">校智联</p>
          <!-- <img class="logo" src="../../assets/images/中国连环画.png" alt="" /> -->
          <div class="person">
            <div class="setUp">
              <div class="whitebg"></div>
              <Dropdown class="dropdownbox" @on-click="menuClick">
                <div class="bg">
                  <Icon
                    type="ios-settings"
                    color="rgb(148,163,184)"
                    size="20"
                  />
                </div>
                <DropdownMenu slot="list">
                  <!-- <DropdownItem name="personalCenter">设置</DropdownItem> -->
                  <DropdownItem name="loginOut">注销</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
            <div class="userHover">
              <div class="whitebg"></div>
              <img
                class="user"
                src="../../assets/images/icon_people.png"
                alt=""
              />
            </div>

            <p>{{ user && user.name ? user.name : "" }}</p>
          </div>
        </div>
        <div class="banner">
          <div class="bannerImg">
            <img src="../../assets/images/bannerImg.png" alt="" />
          </div>
          <div class="info">
            <p class="greeting">
              {{
                user && user.name ? user.name : ""
              }}，伴随清风吹起，把一天的快乐举起！
            </p>
          </div>
        </div>
        <div class="flex">
          <div
            class="imgBox"
            v-for="(app, index) in appList"
            :key="index"
            @click="redirect(index)"
          >
            <img class="pic" :src="getImage(app.icon)" alt="" />
            <p>{{ app.title }}</p>
          </div>
        </div>
      </div>
    </div>

    <Modal
      v-model="groupModal"
      :title="title"
      :footer-hide="true"
      class-name="group-vertical-center-modal"
    >
      <Row>
        <Col
          span="6"
          class="mb-3 mt-3 text-center"
          v-for="(item, index) in apps"
          :key="item"
        >
          <div class="imgBox" @click="toTargetModal(item, index)">
            <img :src="item.icon" alt="" />
            <p>{{ item.title }}</p>
          </div>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import main from "./main.js";
export default main;
</script>
<style lang="less" scoped>
@import "./main.less";
</style>
